<template>
  <div>
    <div align="center">
      <el-card class="box-card">
        <h2>商户注册</h2><br>
        <el-form :model="userLogin" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-row>
            <el-col :span="15">
              <el-form-item label="手机号" prop="phone">
                <el-input v-model="userLogin.phone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-button size="small" @click="getCode">获取验证码</el-button>
            </el-col>
          </el-row>
          <el-form-item label="验证码" prop="code">
            <el-input v-model="userLogin.code"></el-input>
          </el-form-item>
          <el-button type="primary" @click="register">立即注册</el-button>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RegisterView',
  data () {
    return {
      userLogin: {
        phone: '',
        code: ''
      },
      rules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    getCode () {
      this.axios.get('/system/sms/send/' + this.userLogin.phone).then(res => {
        if (res.data.code === 200) {
          this.$message.success('发送成功！')
        } else {
          this.$message.error('发送失败！')
        }
      })
    },
    register () {
      // this.$router.push('/addBusiness')
      this.axios.get('/system/sms/login', {
        params: {
          phone: this.userLogin.phone,
          code: this.userLogin.code
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.$message.success('注册成功！')
          this.$router.push('/addBusiness')
        } else {
          this.$message.error('注册失败！')
        }
      })
    }
  }
}
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 480px;
}

.el-card {
  margin: auto;
  margin-top: auto;
}
</style>
